---
title: Icon Cloud
date: 2024-05-24
description: An interactive 3D tag cloud component
author: dillionverma
published: true
---

<ComponentPreview name="icon-cloud-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/icon-cloud
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="icon-cloud" />

</Steps>

</TabsContent>

</Tabs>

## With Images

<ComponentPreview name="icon-cloud-demo-2" />

## With SVG Icons

<ComponentPreview name="icon-cloud-demo-3" />

## Usage

```tsx showLineNumbers
import { IconCloud } from "@/components/ui/icon-cloud"
```

```tsx showLineNumbers
<div className="relative overflow-hidden">
  <IconCloud images={images} />
</div>
```

## Props

| Prop     | Type                | Default | Description                                |
| -------- | ------------------- | ------- | ------------------------------------------ |
| `icons`  | `React.ReactNode[]` | `[]`    | Array of icons to render in the cloud      |
| `images` | `string[]`          | `[]`    | Array of image URLs to render in the cloud |
